<template>
  <div>
    <div id="breadcrumb">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <a-button type="danger" @click="handleEndGame">结束游戏</a-button>
          <a-tooltip placement="topLeft" title="Prompt Text">
            当前游戏中人数：{{ playerNum }}
          </a-tooltip>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-table
        :columns="playerscolumns"
        :data-source="playerList"
        :pagination="false"
        :loading="loading"
        size="small"
    >
      <template slot="action" slot-scope="text, record">
        <div>
          <a-select
              v-model="role[record.id]"
              allowClear
              placeholder="请选择角色"
              style="width: 200px"
              :options="roles"
          />
        </div>
      </template>
      <template slot="action1" slot-scope="text, record">
        <div>
          <a-switch v-model="mvp[record.id]"></a-switch>
        </div>
      </template>
      <template slot="action2" slot-scope="text, record">
        <div>
          <a-switch v-model="reward[record.id]" v-if="record.reward && record.reward.amount > 0"></a-switch>
        </div>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {

  name: 'Game',

  data () {
    return {
      playerscolumns: [
        {
          title: 'ID',
          dataIndex: 'id'
        },
        {
          title: '游戏玩家',
          dataIndex: 'player'
        },
        {
          title: '游戏角色',
          dataIndex: 'player_id',
          scopedSlots: { customRender: 'action' }
        },
        {
          title: 'mvp',
          dataIndex: 'mvp_id',
          scopedSlots: { customRender: 'action1' }
        },
        {
          title: '是否选择身份',
          dataIndex: 'reward_id',
          scopedSlots: { customRender: 'action2' }
        }
      ],
      playerList: [],
      role: {},
      roles: [],
      mvp: {},
      reward: {},
      playerNum: 0,
      loading: false
    }
  },

  mounted () {
    this.getRoles()
  },

  created () {
    this.getPlayers()
  },

  methods: {
    getPlayers () {
      this.loading = true
      this.$http.get('api/admin/playing/players').then((result) => {
        this.loading = false
        this.playerList = result
        this.playerNum = result.length
      }, (error) => {
        this.loading = false
        this.$message.error(error.message)
      })
    },
    getRoles () {
      this.$http.get('api/admin/playing/roles').then((result) => {
        result.forEach((item) => {
          this.roles.push({
            label: item.name,
            key: item.id
          })
        })
      }, (error) => {
        this.$message.error(error.message)
      })
    },
    handleEndGame () {
      this.$confirm({
        title: '确认操作',
        content: '确定结束游戏',
        onOk: () => this.$http.post('api/admin/records', {
          role: this.role,
          mvp: this.mvp,
          reward: this.reward
        }).then((result) => {
          if (result) {
            this.$message.success('游戏已结束')
            this.$router.replace({ path: '/records' })
          }
        }, (error) => {
          this.$message.error(error.message)
        })
      })
    }
  }
}
</script>

<style scoped>
#breadcrumb {
  margin-top: 0;
  margin-bottom: 10px;
}
</style>